<template>
  <transition name="opacity-fade">
    <div
      v-loading="loading"
      class="log-template-create">
      <wk-backgroud-tabs
        v-model="tabIndex"
        :options="tabs"
      >
        <template slot="right">
          <el-button v-debounce="sendClick" type="primary">发布</el-button>
          <i
            class="el-icon-close create-close"
            @click="closeClick" />
        </template>
      </wk-backgroud-tabs>
      <base-info-set
        v-show="tabIndex === 'base'"
        ref="baseInfoSet"
        :fields="fields"
        :fields-form="fieldsForm"
        :fields-rules="fieldsRules"
        :validate-on-rule-change="false"
        @change="formChange"
      >
        <template slot-scope="{ data }">
          <xh-icon-select
            v-if="data && data.formType == 'icon'"
            :value="fieldsForm[data.field]"
            @value-change="oldChange($event, data)"
          />
          <div
            v-else-if="data && data.formType == 'limitFlag'"
            class="limit-flag">
            <el-select v-model="fieldsForm.limitFlag">
              <el-option
                v-for="item in data.setting"
                :key="item.value"
                :label="item.name"
                :value="item.value" />
            </el-select>
            <el-form-item
              v-if="fieldsForm.limitFlag === 1"
              style="padding: 0;"
              prop="limitCount">
              <flexbox
                class="range-select">
                <el-input-number
                  v-model="fieldsForm.min"
                  :precision="0"
                  :min="1"
                  :max="20000"
                  :controls="false"
                  placeholder="不限制" />
                <span class="range-separator">-</span>
                <el-input-number
                  v-model="fieldsForm.max"
                  :precision="0"
                  :min="1"
                  :max="20000"
                  :controls="false"
                  placeholder="不限制" />
              </flexbox>
            </el-form-item>
          </div>
          <flexbox
            v-else-if="data && data.formType == 'submitCount'"
            class="submit-cell">
            <el-select
              v-model="fieldsForm.subCountObj.submitType">
              <el-option
                v-for="item in data.setting"
                :key="item.value"
                :label="item.name"
                :value="item.value" />
            </el-select>
            <el-input-number
              v-if="fieldsForm.subCountObj.submitType !== 0"
              v-model="fieldsForm.subCountObj.submitCount"
              :precision="0"
              :min="1"
              :max="20000"
              :controls="false"
              placeholder="篇" />
          </flexbox>
          <div
            v-else-if="data && data.formType == 'send-range'"
            class="send-range">
            <el-checkbox v-model="formConfig.showUserDept">选择人员部门</el-checkbox>
            <el-form-item
              v-if="formConfig.showUserDept"
              prop="sendUserDeptsList"
              style="padding: 0;">
              <wk-user-dep-dialog-select
                :user-value.sync="fieldsForm.sendUserIdList"
                :dep-value.sync="fieldsForm.sendDeptIdList"
                style="width: 100%;"
              />
            </el-form-item>
            <el-checkbox v-model="formConfig.showLevel">选择上级</el-checkbox>
            <el-form-item
              v-if="formConfig.showLevel"
              style="padding: 0;"
              prop="parentLevelList">
              <el-select
                v-model="fieldsForm.parentLevelList"
                multiple="">
                <el-option
                  v-for="item in levelOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-checkbox
              v-model="fieldsForm.customSend"
              :true-label="1"
              :false-label="0"
            >允许发起人自定义添加发送范围</el-checkbox>
          </div>
          <div
            v-else-if="data && data.formType == 'log-rule'">
            <el-radio-group v-model="fieldsForm.ruleStatus">
              <el-radio :label="0">不统计</el-radio>
              <el-radio :label="1">统计</el-radio>
            </el-radio-group>
            <div v-if="fieldsForm.ruleStatus === 1">
              <el-form-item
                class="wk-form-item"
                prop="logRule.type"
                label="统计方式">
                <el-select v-model="fieldsForm.logRule.type">
                  <el-option
                    v-for="item in logRuleTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>

              <div v-if="fieldsForm.logRule.type === 1">
                <el-form-item class="wk-form-item" prop="logRule.effectiveDay" label="需要统计的日志">
                  <el-checkbox-group v-model="fieldsForm.logRule.effectiveDay">
                    <el-checkbox v-for="item in weekDaysOptions" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <flexbox>
                  <el-form-item
                    class="wk-form-item is-block-form-item"
                    label="统计起止时间"
                    prop="logRuleTime">
                    <el-select v-model="fieldsForm.logRule.startTime">
                      <el-option
                        v-for="item in dayTimeOptions"
                        :key="item"
                        :label="item"
                        :value="item" />
                    </el-select>
                    <span>-</span>
                    <el-select v-model="fieldsForm.logRule.endTime">
                      <el-option
                        v-for="item in dayTimeOptions"
                        :key="item"
                        :label="item"
                        :value="item" />
                    </el-select>
                  </el-form-item>
                </flexbox>
              </div>
              <div v-if="fieldsForm.logRule.type === 2">
                <flexbox>
                  <el-form-item
                    class="wk-form-item is-block-form-item"
                    label="统计起止时间"
                    prop="logRuleTime">
                    <el-select v-model="fieldsForm.logRule.startDay">
                      <el-option
                        v-for="item in weekDaysOptions"
                        :key="item.value"
                        :label="`每${item.label}`"
                        :value="parseInt(item.value)" />
                    </el-select>
                    <span>-</span>
                    <el-select v-model="fieldsForm.logRule.endDay">
                      <el-option
                        v-for="item in weekDaysOptions"
                        :key="item.value"
                        :label="`每${item.label}`"
                        :value="parseInt(item.value)" />
                    </el-select>
                  </el-form-item>
                </flexbox>
              </div>
              <div v-if="fieldsForm.logRule.type === 3">
                <flexbox>
                  <el-form-item
                    class="wk-form-item is-block-form-item"
                    label="统计起止日期"
                    prop="logRuleTime">
                    <el-select v-model="fieldsForm.logRule.startDay">
                      <el-option
                        v-for="item in monthTimeOptions"
                        :key="item.value"
                        :label="`${item.label}`"
                        :value="item.value" />
                    </el-select>
                    <span>-</span>
                    <el-select v-model="fieldsForm.logRule.endDay">
                      <el-option
                        v-for="item in monthTimeOptions"
                        :key="item.value"
                        :label="`${item.label}`"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </flexbox>
              </div>
            </div>
          </div>
          <el-input
            v-if="data && data.formType == 'look-des'"
            :value="data.value"
            disabled
          />
        </template>
      </base-info-set>
      <fields-index
        v-show="tabIndex === 'fields'"
        ref="fieldsIndex"
        :props="fieldProps"
        :field-lib-fun="fieldLibFun"
        :get-list-promise="getListPromise"
        :save-promise="savePromise" />
    </div>
  </transition>
</template>

<script type="text/javascript">
import {
  oaLogTemplateAddAPI,
  oaLogTemplateDetailAPI
} from '@/api/admin/oa'

import WkBackgroudTabs from '@/views/admin/examine/components/WkBackgroudTabs'
import BaseInfoSet from '@/views/admin/examine/components/BaseInfoSet'
import FieldsIndex from '@/views/admin/fields/index'
import XhIconSelect from '../components/XhIconSelect'
import WkUserDepDialogSelect from '@/components/NewCom/WkUserDepDialogSelect'

import { getMaxIndex } from '@/utils'
import { objDeepCopy } from '@/utils'
import GenerateRulesMixin from '@/components/NewCom/WkForm/GenerateRules'

export default {
  name: 'LogTemplateCreate',
  components: {
    WkBackgroudTabs,
    BaseInfoSet,
    XhIconSelect,
    FieldsIndex,
    WkUserDepDialogSelect
  },
  filters: {},
  mixins: [GenerateRulesMixin],
  props: {
    id: [String, Number]
  },
  data() {
    return {
      loading: false,
      height: document.documentElement.clientHeight - 100,
      tabs: [{
        label: '1.配置基础信息',
        value: 'base'
      }, {
        label: '2.字段配置',
        value: 'fields'
      }],
      tabIndex: 'base',
      fields: [],
      fieldsForm: {},
      fieldsRules: {},
      detail: null, // 详情对象
      formConfig: {
        showUserDept: false, // 展示员工部门
        showLevel: false // 展示层级
      },
      levelOption: [],
      // 日志规则
      logRuleTypes: [{
        label: '按日',
        value: 1
      }, {
        label: '按周',
        value: 2
      }, {
        label: '按月',
        value: 3
      }],
      weekDaysOptions: [
        {
          label: '周一',
          value: '1'
        },
        {
          label: '周二',
          value: '2'
        },
        {
          label: '周三',
          value: '3'
        },
        {
          label: '周四',
          value: '4'
        },
        {
          label: '周五',
          value: '5'
        },
        {
          label: '周六',
          value: '6'
        },
        {
          label: '周日',
          value: '7'
        }
      ],
      dayTimeOptions: [],
      monthTimeOptions: []
    }
  },
  computed: {
    isEdit() {
      return !!this.id
    },
    fieldProps() {
      return {
        title: this.fieldsForm.name,
        showSave: false,
        showBack: false
      }
    }
  },
  created() {
    for (let index = 0; index <= 23; index++) {
      this.dayTimeOptions.push(index < 10 ? `0${index}:00` : `${index}:00`)
    }
    this.dayTimeOptions.push('23:59')

    for (let index = 1; index <= 31; index++) {
      this.monthTimeOptions.push({
        label: `每月${index}号`,
        value: index
      })
    }

    for (let index = 1; index <= 20; index++) {
      const label = `第${index}级上级`
      this.levelOption.push({
        label: label,
        value: index
      })
    }

    if (this.isEdit) {
      this.getEditData()
    } else {
      this.getBaseField()
    }
  },
  mounted() {
    this.$el.style.zIndex = getMaxIndex()
    document.body.appendChild(this.$el)

    window.onresize = () => {
      this.height = document.documentElement.clientHeight - 100
    }
  },
  destroyed() {
    // remove DOM node after destroy
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    /**
     * @description: 获取编辑详情
     * @return {*}
     */
    getEditData() {
      this.loading = true
      oaLogTemplateDetailAPI(this.id).then(res => {
        this.detail = res.data || {}
        this.$nextTick(() => {
          // this.detail 有数据时，触发拉取信息
          this.$refs.fieldsIndex.getFieldList()
        })
        this.getBaseField()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 获取自定义字段
     */
    getBaseField() {
      const field = []

      field.push({
        field: 'name',
        formType: 'text',
        isNull: 1,
        name: '模板名称',
        maxlength: 20,
        setting: [],
        inputTips: '',
        value: this.detail ? this.detail.name : ''
      })

      field.push({
        field: 'templateIcon',
        formType: 'icon',
        isNull: 1,
        name: '模板图标',
        setting: [],
        inputTips: '',
        value: this.detail ? this.detail.templateIcon || '' : 'wk wk-l-record,#0052CC'
      })

      field.push({
        field: 'dept',
        formType: 'userDep',
        isNull: 0,
        name: '适用范围',
        setting: [],
        inputTips: '默认全公司',
        value: {
          userList: this.detail && this.detail.userList ? this.detail.userList.map(item => item.userId) : [],
          deptList: this.detail && this.detail.deptList ? this.detail.deptList.map(item => item.id) : []
        }
      })

      field.push({
        field: 'limitFlag',
        formType: 'limitFlag',
        isNull: 0,
        name: '填写字数限制',
        setting: [
          { name: '不限制', value: 0 },
          { name: '限制', value: 1 }
        ],
        inputTips: '仅针对多行文本和富文本字段类型内的输入进行统计',
        value: this.detail ? this.detail.limitFlag : 0
      })

      field.push({
        field: 'subCountObj',
        formType: 'submitCount',
        isNull: 0,
        name: '提交数量限制',
        setting: [
          { name: '不限制', value: 0 },
          { name: '每天', value: 1 },
          { name: '每周', value: 2 },
          { name: '每月', value: 3 }
        ],
        inputTips: '限制员工在时间范围内的创建数量',
        value: this.detail ? {
          submitCount: this.detail.submitCount,
          submitType: this.detail.submitType || 0
        } : {
          submitCount: 0,
          submitType: 0
        }
      })

      field.push({
        field: 'send-range', // 包含 员工部门和 上级
        formType: 'send-range',
        isNull: 0,
        name: '默认发送范围',
        inputTips: ''
      })

      field.push({
        field: 'logRule', // 日志完成规则
        formType: 'log-rule',
        isNull: 0,
        name: '统计规则设置',
        inputTips: '设置统计后，可以在前台看到自己及下属的完成情况'
      })

      field.push({
        field: 'modifyFlag', // 0能， 1不能
        formType: 'select',
        isNull: 0,
        name: '填写后是否允许修改',
        setting: [
          { name: '允许修改', value: 0 },
          { name: '不允许修改', value: 1 }
        ],
        inputTips: '',
        value: this.detail ? this.detail.modifyFlag : 0
      })

      field.push({
        field: 'deleteFlag',
        formType: 'select',
        isNull: 0,
        name: '填写后是否允许删除',
        setting: [
          { name: '不允许员工删除提交的日志', value: 0 },
          { name: '仅允许删除24小时内提交的日志', value: 1 },
          { name: '允许员工删除提交的日志', value: 2 }
        ],
        inputTips: '',
        value: this.detail ? this.detail.deleteFlag : 0
      })

      field.push({
        field: 'lookDes',
        formType: 'look-des',
        ignore: true,
        isNull: 0,
        name: '日志查看权限说明',
        inputTips: '',
        value: '默认上级可以查看下级的日志，被发送人可以查看发送人的日志，超级管理员角色可以查看所有日志'
      })

      field.push({
        field: 'remark',
        formType: 'textarea',
        isNull: 0,
        name: '描述说明',
        maxlength: 200,
        setting: [],
        inputTips: '请填写相关注意事项，方便员工在申请时查阅，限制输入200字',
        value: this.detail ? this.detail.remark : ''
      })

      this.handleFields(field)
    },

    /**
     * 调整字段
     */
    handleFields(list) {
      const fieldRules = {}
      const fieldForm = {}
      list.forEach(item => {
        if (!item.ignore) {
          if (item.formType === 'userDep') {
            fieldForm.userList = item.value.userList || []
            fieldForm.deptList = item.value.deptList || []
          } else if (item.formType === 'send-range') {
          // 定制范围的 值 和 规则
            if (this.detail) {
              fieldForm.sendUserIdList = this.detail.sendUserIdList || []
              fieldForm.sendDeptIdList = this.detail.sendDeptIdList || []
              fieldForm.parentLevelList = this.detail.parentLevelList || []
              fieldForm.customSend = this.detail.customSend // 0 关闭 1 开启 允许发送人自定义范围
              this.formConfig = {
                showUserDept: fieldForm.sendUserIdList.length + fieldForm.sendDeptIdList.length > 0, // 展示员工部门
                showLevel: fieldForm.parentLevelList.length > 0 // 展示层级
              }
            } else {
              fieldForm.sendUserIdList = []
              fieldForm.sendDeptIdList = []
              fieldForm.parentLevelList = [] // 默认
              fieldForm.customSend = 0 // 0 关闭 1 开启 允许发送人自定义范围
              this.formConfig = {
                showUserDept: false, // 展示员工部门
                showLevel: false // 展示层级
              }
            }

            // 选择人员部门规则
            fieldRules.sendUserDeptsList = [{
              validator: (rule, value, callback) => {
                if (this.formConfig.showUserDept &&
            fieldForm.sendUserIdList.length + fieldForm.sendDeptIdList.length === 0) {
                  callback(new Error('请选择'))
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]
            // 选择上级规则
            fieldRules.parentLevelList = [{
              validator: (_, value, callback) => {
                if (this.formConfig.showLevel &&
            (!value || value.length === 0)) {
                  callback(new Error('请选择'))
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]
          } else if (item.formType === 'submitCount') {
            fieldForm[item.field] = item.value
            // 选择上级规则
            fieldRules.subCountObj = [{
              validator: (_, value, callback) => {
                if (this.fieldsForm.subCountObj.submitType != 0 &&
                !this.fieldsForm.subCountObj.submitCount) {
                  callback(new Error('请输入限制数量'))
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]
          } else if (item.formType === 'log-rule') {
            const defaultRule = {
              type: 1,
              effectiveDay: [],
              startTime: '',
              endTime: '',
              startDay: '',
              endDay: ''
            }
            if (this.detail) {
            // ruleStatus 日志规则是否统计 默认0否，1是
              fieldForm.ruleStatus = this.detail.ruleStatus
              const logRule = this.detail.logRule
              if (logRule) {
                logRule.effectiveDay = logRule.effectiveDay ? logRule.effectiveDay.split(',') : []
                fieldForm.logRule = logRule
              } else {
                fieldForm.logRule = defaultRule
              }
            } else {
            // ruleStatus 日志规则是否统计 默认0否，1是
              fieldForm.ruleStatus = 0

              fieldForm.logRule = defaultRule
            }

            // 日志规则
            fieldRules['logRule.effectiveDay'] = [{
              validator: (_, value, callback) => {
                if (this.fieldsForm.ruleStatus === 1 &&
                this.fieldsForm.logRule.type === 1 &&
            (!value || value.length === 0)) {
                  callback(new Error('请选择'))
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]

            fieldRules.logRuleTime = [{
              validator: (_, value, callback) => {
                if (this.fieldsForm.ruleStatus === 1) {
                  let error = 0
                  const { logRule } = this.fieldsForm
                  if ([2, 3].includes(logRule.type)) {
                    if (!logRule.startDay || !logRule.endDay) {
                      error = 1
                    } else {
                      error = logRule.endDay < logRule.startDay ? 2 : 0
                    }
                  } else if ([1].includes(logRule.type)) {
                    if (!logRule.startTime || !logRule.endTime) {
                      error = 1
                    } else {
                      error = parseInt(logRule.startTime.replace(':', '')) > parseInt(logRule.endTime.replace(':', '')) ? 2 : 0
                    }
                  }
                  error !== 0 ? callback(new Error({
                    1: '请选择',
                    2: '时间有误'
                  }[error])) : callback()
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]
          } else {
            fieldRules[item.field] = this.getRules(item)
            fieldForm[item.field] = item.value
          }

          // 字数限制
          if (item.formType === 'limitFlag') {
          // 0 不限制 最大最小值 置空
            if (fieldForm.limitFlag === 0 || !this.detail) {
              fieldForm.min = undefined
              fieldForm.max = undefined
            } else if (fieldForm.limitFlag === 1 && this.detail) {
              fieldForm.min = this.detail.min
              fieldForm.max = this.detail.max
            }

            // rules
            fieldRules.limitCount = [{
              validator: (rule, value, callback) => {
                if (this.fieldsForm.max &&
            this.fieldsForm.min &&
            this.fieldsForm.max < this.fieldsForm.min) {
                  callback(new Error('最少字数不能大于最多字数'))
                } else {
                  callback()
                }
              },
              item: item,
              trigger: ['change', 'blur']
            }]
          }
        }
      })

      fieldForm.isNeedChild = this.detail?.isNeedChild || 0

      this.fields = objDeepCopy(list)
      this.fieldsForm = fieldForm
      this.fieldsRules = fieldRules
    },

    /**
     * change
     */
    formChange(item, index, value) {
      console.log('this.fieldsForm---', JSON.stringify(this.fieldsForm))
    },

    /**
     * 旧change回调
     */
    oldChange(dataValue, field) {
      this.$set(this.fieldsForm, field.field, dataValue.value)
      this.$refs.baseInfoSet.form.validateField(field.field)
    },

    /**
     * 发布点击
     */
    sendClick() {
      this.$refs.baseInfoSet.validate().then(valid => {
        if (valid) {
          // doing
          this.submitFieldsData()
        } else {
          // 提示第一个error
          this.getFormErrorMessage(this.$refs.baseInfoSet)
          return false
        }
      })
    },

    /**
     * @description: 获取字段数据
     * @param {*} data
     * @return {*}
     */
    submitFieldsData() {
      this.loading = true
      this.$refs.fieldsIndex.handleSave().then(() => {
        this.loading = false
        // 编辑的时候，成功后关闭
        this.closeClick()
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 获取error错误
     */
    getFormErrorMessage(crmForm) {
      // 提示第一个error
      if (crmForm.fields) {
        for (
          let index = 0;
          index < crmForm.fields.length;
          index++
        ) {
          const ruleField = crmForm.fields[index]
          if (ruleField.validateState == 'error') {
            this.$message.error(ruleField.validateMessage)
            break
          }
        }
      }
    },

    /**
     * 关闭
     */
    closeClick() {
      this.$emit('close')
    },

    fieldLibFun(list) {
      return list.filter(item => item.formType !== 'pic')
    },

    getListPromise() {
      return new Promise((resolve, reject) => { // eslint-disable-line
        if (this.isEdit) {
          resolve({
            data: this.detail.formList
          })
        } else {
          resolve({ data: [] })
        }
      })
    },

    savePromise(list) {
      return new Promise((resolve, reject) => { // eslint-disable-line
        const fieldsForm = objDeepCopy(this.fieldsForm)
        fieldsForm.formList = list
        fieldsForm.deptIdList = fieldsForm.deptList
        fieldsForm.userIdList = fieldsForm.userList
        delete fieldsForm.deptList
        delete fieldsForm.userList

        if (!this.formConfig.showUserDept) {
          fieldsForm.sendUserIdList = []
          fieldsForm.sendDeptIdList = []
        }
        if (!this.formConfig.showLevel) {
          fieldsForm.parentLevelList = []
        }

        // 限制数量
        fieldsForm.submitType = this.fieldsForm.subCountObj.submitType
        if (fieldsForm.submitType) {
          fieldsForm.submitCount = this.fieldsForm.subCountObj.submitCount
        } else {
          fieldsForm.submitCount = null
        }
        delete fieldsForm.subCountObj

        // 都无值是 重置为 不限制
        if (!fieldsForm.min && !fieldsForm.max) {
          fieldsForm.limitFlag = 0
        }

        // 不限制 min max 置空
        if (fieldsForm.limitFlag === 0) {
          fieldsForm.min = null
          fieldsForm.max = null
        }
        fieldsForm.logRule.effectiveDay = fieldsForm.logRule.effectiveDay.join(',')

        if (this.isEdit) {
          fieldsForm.id = this.id
        }
        console.log('savePromise', list, fieldsForm)
        oaLogTemplateAddAPI(fieldsForm).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.$emit('success')
          resolve()
        }).catch(() => {
          reject()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.opacity-fade-enter-active,
.opacity-fade-leave-active {
  transition: all 0.2s;
}

.opacity-fade-enter,
.opacity-fade-leave-to {
  opacity: 0;
}

.log-template-create {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f5f5f7;

  .create-close {
    display: block;
    padding: 10px;
    font-size: 24px;
    color: #909399;
    cursor: pointer;
  }

  .create-close:hover {
    color: $--color-primary;
  }

  .base-info-set {
    width: 900px;
    height: calc(100% - 100px);
    margin: 20px auto 0;
  }

  .wk-approve-flow-wrap {
    top: 60px;
  }

  .limit-flag {
    .el-select {
      width: 100%;
    }
  }

  .send-range {
    .el-checkbox {
      display: block;
    }
  }

  .submit-cell {
    .el-select,
    .el-input-number {
      flex: 1;
    }

    .el-select {
      max-width: calc(50% - 8px);
    }

    .el-select + .el-input-number {
      margin-left: 16px;
    }
  }

  .range-select {
    .range-separator {
      margin: 0 10px;
    }
  }
}

::v-deep .el-form-item {
  &.is-log-rule,
  &.is-look-des,
  &.is-block-form-item {
    flex: 0 0 100%;
  }
}
</style>
